<template>
  <div class="home app-container">
    <div class="home-title">
      <div class="col">
        <div class="col-item" v-for="(item,index) in tabs" :key="index">
          <img :src="item.img" alt="">
          <div class="cil-item-content">
            <div style="color: #666666;">{{item.name}}</div>
            <div style="margin-top: 15px;">
              <c-number v-model="item.numb"></c-number>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="home-content">
      <div ref="echarts1" class="echarts-line"></div>
      <div ref="echarts2" class="echarts-line"></div>
      <div ref="echarts3" class="echarts-line"></div>
    </div>
  </div>
</template>
<script>
  import echarts from 'echarts'
  import CNumber from '@/components/Number'
  export default {
    name: 'Home',
    components:{
      CNumber
    },
    data() {
      return {
        tabs: [{
            img: require('../assets/images/home_1.png'),
            numb: 123456,
            name:"用户总数"
          },
          {
            img: require('../assets/images/home_2.png'),
            numb: 71248,
            name:"订单总数"
          },
          {
            img: require('../assets/images/home_3.png'),
            numb: 7203,
            name:"总金额"
          },
          {
            img: require('../assets/images/home_4.png'),
            numb: 901223,
            name:"商品总数"
          },
          {
            img: require('../assets/images/home_5.png'),
            numb: 45802223,
            name:"今日订单"
          },
          {
            img: require('../assets/images/home_6.png'),
            numb: 123213,
            name:"昨日订单"
          },
          {
            img: require('../assets/images/home_7.png'),
            numb: 123456,
            name:"七天订单"
          },
          {
            img: require('../assets/images/home_8.png'),
            numb: 123456,
            name:"本月订单"
          },

          {
            img: require('../assets/images/home_8.png'),
            numb: 123456,
            name:"今日充值金额"
          },
          {
            img: require('../assets/images/home_8.png'),
            numb: 123456,
            name:"今日充值次数"
          },
          {
            img: require('../assets/images/home_8.png'),
            numb: 123456,
            name:"本月充值余额"
          },
          {
            img: require('../assets/images/home_8.png'),
            numb: 123456,
            name:"本月充值次数"
          }
        ]
      }
    },
    mounted() {
      console.log('echarts', echarts)
      let myChart1 = echarts.init(this.$refs['echarts1'])
      let myChart2 = echarts.init(this.$refs['echarts2'])
      let myChart3 = echarts.init(this.$refs['echarts3'])
      let option = {
        title: {
          text: '本月额度',
          padding: [20,0,0,0],
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            animation: false,
            lineStyle: {
              width: 0,
              color: 'rgb(0,177,221)'
            }
          }
        },
        xAxis: {
          type: 'category',
          data: [0, 2, 4, 6, 8, 10],
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgb(0,177,221)",
              width: 1,
              type: "solid"
            }
          }
        },
        yAxis: {
          type: 'value',
          data: [0, 2, 4, 6, 8, 10],
          // boundaryGap:[],
          min: value => value.min - 2,
          max: value => value.max + 2,
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgb(0,177,221)",
              width: 1,
              type: "solid"
            }
          }
        },
        series: [{
          data: [3, 2, 4, 6, 8, 5],
          type: 'line',
          smooth: true,
          showSymbol: false,
          markArea: {
            itemStyle: {
              color: 'rgba(242, 242, 242, 0.4)'
            },
            silent: true,
            data: [
              [{
                  name: '',
                  yAxis: '2'
                },
                {
                  yAxis: '4'
                }
              ],
              [{
                  name: '',
                  yAxis: '6'
                },
                {
                  yAxis: '8'
                }
              ]
            ]
          },
          lineStyle: {
            normal: {
              color: 'rgb(0,177,221)'
            }
          },
          itemStyle: {
            normal: {
              borderWidth: 1,
              color: 'rgb(0,177,221)'
            }
          }
        }]
      };
      myChart1.setOption(option)
      myChart2.setOption(option)
      myChart3.setOption(this.init())
    },
    methods: {
      init(myChart3) {
       return {
          series: [{
            name: 'Nightingale Chart',
            type: 'pie',
            radius: [20, 120],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 16
            },
            data: [{
                value: 40,
                name: 'rose 1'
              },
              {
                value: 38,
                name: 'rose 2'
              },
              {
                value: 32,
                name: 'rose 3'
              },
              {
                value: 30,
                name: 'rose 4'
              },
              {
                value: 28,
                name: 'rose 5'
              },
              {
                value: 26,
                name: 'rose 6'
              },
              {
                value: 22,
                name: 'rose 7'
              },
              {
                value: 18,
                name: 'rose 8'
              }
            ]
          }]
        };
      }
    }
  }
</script>
<style lang="scss" scope>
  .home {
    .home-content {
      display: flex;
      .echarts-line {
        width: 400px;
        height: 300px;
        box-shadow: 0 0 0 2px #f2f2f2;
        border-radius: 4px;
        &+.echarts-line{
          margin-left: 20px;
        }
      }
    }

    .home-title {
      .col {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        width: 1240px;
        margin-bottom: 20px;
        .col-item {
          display: flex;
          justify-content: space-between;
          margin-bottom: 20px;
          align-items: center;
          width: 24%;
          height: 113px;
          box-shadow: 0 0 0 2px #f2f2f2;
          border-radius: 4px;
          padding: 0 15px;

          img {
            width: 59px;
          }

          .cil-item-content {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-end;
          }
        }
      }
    }
  }
</style>
